<template>
  <div>
    123adasd
    <slot name="foo">
      <!-- <div class="foo">qwe</div> -->
    </slot>
    <transition>
      <p v-if="show">Foo</p>
    </transition>
    <a-button @click="add"></a-button>
    <div class="state">{{ $store.state.count }}</div>
    <button class="up" @keydown.up="up">123</button>
  </div>
</template>

<script>
import { mapMutations, mapActions } from "vuex";
export default {
  mounted() {
    this.$emit("print", 123);
  },

  data() {
    return {
      show: true,
      count: 0,
      str: 1,
    };
  },
  props: {
    color: {
      type: String,
      default: "red",
    },
  },
  methods: {
    ...mapMutations(["ADD_COUNT"]),
    ...mapActions(["ACT_COUNT"]),
    add() {
      this.count = 123;
      this.ACT_COUNT(100);
    },
    up() {
      this.str = 1;
      let api = new Promise((resolve, reject) => {
        resolve(2);
      });
      api.then((_) => {
        this.count = _;
      });
    },
  },
};
</script>

<style></style>
